<template>
  <div class="cpu-container">
    <div class="text-gradient">
      <h2>设备CPU占比</h2>
    </div>

    <div id="cpu-echart-div" style="width: 100%; height: 390px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { cpuAndMem } from '@/api/homePage'

export default {
  name: 'DeviceCPU',
  data() {
    return {
      chart: null,
      data: []
    }
  },

  mounted() {
    this.doQuery()
  },

  methods: {
    async doQuery() {
      const {
        data: { data }
      } = await cpuAndMem()
      if (data && data.cpuList && data.cpuList.length > 0) {
        this.data = data.cpuList.map(item => ({
          usedCpu: item.usedCpu,
          text: item.name
        }))

        this.initChart()
      } else {
        this.showNoDataMessage()
      }
    },

    showNoDataMessage() {
      const noDataDiv = document.getElementById('cpu-echart-div')
      noDataDiv.innerHTML =
        '<div style="text-align: center; padding: 50px;">暂无数据</div>'
    },

    initChart() {
      if (this.data.length === 0) return

      // 初始化图表
      this.chart = echarts.init(document.getElementById('cpu-echart-div'))

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            return `${params.name} <br/>设备CPU占比: ${params.value}%`
          }
        },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },

        yAxis: {
          type: 'category',
          data: this.data.map(item => item.text),
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 14,
              fontWeight: 'bold'
            },
            rotate: 0,
            interval: 0
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '设备CPU占比',
            type: 'bar',
            data: this.data
              .filter(item => item.usedCpu !== 0)
              .map(item => item.usedCpu),
            barWidth: '60%',
            itemStyle: {
              borderRadius: [10, 10, 10, 10], // 设置全局圆角
              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: '#003994' },
                { offset: 1, color: '#7AD2FF' }
              ])
            },
            label: {
              show: true,
              // position: 'right',
              textStyle: {
                color: '#fff',
                fontSize: 14,
                fontWeight: 'bold'
              },
              formatter: '{c}%'
            }
          }
        ]
      }

      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.cpu-container {
  width: 26vw;
}

.text-gradient {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
